<template>
  <div class="c-input-test">
    <h3>CInput 组件测试</h3>

    <!-- 基本用法 -->
    <div class="test-section">
      <h4>1. 基本用法</h4>
      <CInput style="width: 200px" v-model="basicInput" placeholder="请输入内容" />
      <p class="result">输入结果: {{ basicInput }}</p>
    </div>

    <!-- 带清空功能 -->
    <div class="test-section">
      <h4>2. 带清空功能</h4>
      <CInput v-model="clearableInput" placeholder="带清空功能" clearable />
      <p class="result">输入结果: {{ clearableInput }}</p>
    </div>

    <!-- 禁用状态 -->
    <div class="test-section">
      <h4>3. 禁用状态</h4>
      <CInput v-model="disabledInput" placeholder="禁用状态" disabled />
    </div>

    <!-- 带图标 -->
    <div class="test-section">
      <h4>4. 带图标</h4>
      <div class="icon-inputs">
        <CInput v-model="iconInput1" placeholder="带前缀图标" prefix-icon="el-icon-search" />
        <CInput v-model="iconInput2" placeholder="带后缀图标" suffix-icon="el-icon-date" />
      </div>
    </div>

    <!-- 带上手值 -->
    <div class="test-section">
      <h4>5. 带上手值</h4>
      <CInput
        v-model="oldValueInput"
        placeholder="带上手值（鼠标悬停查看）"
        :show-old-value="true"
        old-value="这是上手值"
      />
      <p class="result">输入结果: {{ oldValueInput }}</p>
    </div>

    <!-- 带字数统计 -->
    <div class="test-section">
      <h4>6. 带字数统计</h4>
      <CInput
        v-model="wordLimitInput"
        placeholder="请输入内容（最多20个字符）"
        show-word-limit
        :maxlength="20"
      />
    </div>

    <!-- 必填标记 -->
    <div class="test-section">
      <h4>7. 必填标记</h4>
      <CInput
        v-model="requiredInput"
        placeholder="带必填标记"
        :show-required-mark="true"
        style="width: 200px"
      />
    </div>

    <!-- 不同类型输入框 -->
    <div class="test-section">
      <h4>8. 不同类型输入框</h4>
      <div class="type-inputs">
        <CInput v-model="passwordInput" placeholder="密码输入框" type="password" />
        <CInput v-model="numberInput" placeholder="数字输入框" type="number" />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import CInput from '../CInput/CInput.vue'

// 基本输入
const basicInput = ref('')

// 带清空功能的输入
const clearableInput = ref('这是带清空功能的输入框')

// 禁用状态的输入
const disabledInput = ref('这是禁用的输入框')

// 带图标
const iconInput1 = ref('')
const iconInput2 = ref('')

// 带上手值
const oldValueInput = ref('')

// 带字数统计
const wordLimitInput = ref('')

// 必填标记
const requiredInput = ref('')

// 不同类型
const passwordInput = ref('')
const numberInput = ref('')
</script>

<style lang="scss" scoped>
.c-input-test {
  overflow: auto;
  height: 100%;
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;

  h3 {
    margin-bottom: 20px;
    color: #333;
    font-size: 20px;
    font-weight: 600;
  }

  h4 {
    margin: 15px 0 10px;
    color: #666;
    font-size: 16px;
    font-weight: 500;
  }

  .test-section {
    margin-bottom: 25px;
    padding: 15px;
    background: #f9f9f9;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
  }

  .result {
    margin-top: 10px;
    font-size: 14px;
    color: #666;
  }

  .icon-inputs,
  .type-inputs {
    display: flex;
    gap: 15px;
    margin-bottom: 10px;
  }

  .icon-inputs c-input,
  .type-inputs c-input {
    flex: 1;
  }
}
</style>
